<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="xbsj-labels" content="Earth示例">
  </meta>
  <title>Pin-gif</title>
  <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
  <script src="../../XbsjEarth/XbsjEarth.js"></script>
  <script src="./scripts/vue.min.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .checkbox {
      cursor: pointer;
    }

    .dialog {
      position: absolute;
      width: 80px;
      min-height: 60px;
      color: white;
      /* background-image: url("./images/dialog.png"); */
      background-size: 100% 100%;
      padding: 5px;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative; overflow: hidden;">
    <earth-comp></earth-comp>
  </div>

  <script>
    // 1 创建Earth的vue组件
    var EarthComp = {
      template: `
                <div style="width: 100%; height: 100%">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                    <div 
                        v-show="showInfo" 
                        class="dialog"
                        @click = fly
                        :style="{ left: (winPos[0] - 62) + 'px', bottom: winPos[1] + 'px' }"
                    >
                       <img style="width:80px;height:60px;" src="./images/timg.gif"></img>
                    </div>
                </div>
            `,
      data() {
        return {
          _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
          showInfo: true,
          winPos: [0, 0],
        };
      },
      // 1.1 资源创建
      mounted() {
        // 1.1.1 创建地球
        var earth = new XE.Earth(this.$refs.earthContainer);
        earth.interaction.picking.enabled = true;

        // 1.1.2 场景配置
        earth.sceneTree.root = {
          "expand": true,
          "title": "预览场景",
          "children": [{
            "ref": 'tileset',
            "czmObject": {
              "name": '大雁塔',
              "xbsjType": "Tileset",
              "url": '../assets/dayanta/tileset.json',
              "xbsjUseOriginTransform": false,
              "skipLevelOfDetail": false
            },
          }, {
            "ref": 'pin1',
            "czmObject": {
              "name": 'Pin1',
              "xbsjType": "Pin",
              "position": [1.9017005694855162, 0.5972477268978722, 488.7695178987821],
              "near": 300,
              "show": false
            },
          }, {
            "czmObject": {
              "name": '默认影像',
              "xbsjType": "Imagery",
              "xbsjImageryProvider": XE.Obj.Imagery.defaultImageryProviderConfig,
            },
          }]
        };

        var tileset = earth.sceneTree.$refs.tileset.czmObject;
        var pin1 = earth.sceneTree.$refs.pin1.czmObject;

        // 1.1.5 数据绑定
        XE.MVVM.track(this, 'winPos', pin1, 'winPos');

        // 监控数据
        this.uw = XE.MVVM.watch(earth.camera, 'position', () => {
          // xepd: xepositionDistance的缩写
          // pin1.position.xepd(earth.camera.position): 计算相机和pin之间的距离
          const d = pin1.position.xepd(earth.camera.position);
          if (d < 100) {
            this.showInfo = false;
          } else {
            this.showInfo = true;
          }
        });

        this._earth = earth;

        // only for Debug
        window.earth = earth;
        window.tileset = tileset;
        window.pin1 = pin1;
      },
      methods: {
        fly() {
          console.log('即将飞入大雁塔！');
          const position = [1.901729390218574, 0.5972202012953493, 594.3184362850787];
          const rotation = [5.538756509291041, -0.5562768563795704, 6.280692859184528];
          this._earth.camera.flyTo(position, 0, rotation);
        }
      },
      filters: {
        numFilter(value) {
          // 截取当前数据到小数点后两位
          let realVal = parseFloat(value).toFixed(2)
          return realVal
        }
      },
      // 1.2 资源销毁
      beforeDestroy() {
        // vue程序销毁时，需要清理相关资源
        this._earth = this._earth && this._earth.destroy();
      },
    }

    // 2 创建vue程序
    // XE.ready()用来加载Cesium.js等相关资源
    XE.ready().then(() => {
      var app = new Vue({
        el: '#vueApp',
        components: {
          EarthComp,
        },
      });
    });
  </script>
</body>

</html>